<style scoped>
    .fill-item{height:50px;padding:0 10px;}
    .fill-item input{border:0;height:100%;text-align:right;width:200px;}
    .fill-item .select-box{height:100%;}
    .fill-item select{border:0;height:100%;position:absolute;top:0;right:10px;min-width:200px;opacity: 0;}
    .next-btn{display:block;border-radius:5px;height:45px;text-align: center;line-height: 45px;color:#fff;margin:20px 10px;}
    .workNatureRemarks{height:80px;padding:10px;border:0;width:100%;}
</style>
<template>
  <wrap title="填写用户资料">
    <div slot="page">
      <fill-progress :step="3"></fill-progress>
      <div class="fill-box light-bg margin-bottom">
          <!--<div class="fill-item border-bottom flex flex-justify-between flex-align-center">
            <span class="font-15">工作性质</span>
            <i-select v-model="job.workNature" :option="job.workNatureList" @change="changeCompanyNature"></i-select>
          </div>
          <div v-if="job.workNature==3">
            <textarea class="workNatureRemarks font-15" placeholder="备注" v-model="job.workNatureRemarks"></textarea>
          </div>-->
        <div v-if="job.workNature!=3">
          <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
            <span class="font-15">单位行业</span>
            <i-select v-model="job.companyIndustry" :option="job.companyIndustryList"></i-select>
          </div>
          <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
            <span class="font-15">单位性质</span>
            <i-select v-model="job.companyNature" :option="job.companyNatureList"></i-select>
          </div>
          <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
            <span class="font-15">工作单位</span>
            <input class="font-15" v-model="job.company" type="text" placeholder="请填写工作单位">
          </div>
          <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
            <span class="font-15">所在部门</span>
            <input class="font-15" v-model="job.companyDept" type="text" placeholder="请填写所在部门">
          </div>
          <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
            <span class="font-15">职位类型</span>
            <i-select v-model="job.companyPositionType" :option="job.companyPositionTypeList"></i-select>
          </div>
          <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
            <span class="font-15">工作年限</span>
            <i-select v-model="job.workYears" :option="job.workYearsList"></i-select>
          </div>
          <!--<div class="fill-item border-bottom flex flex-justify-between flex-align-center">
            <span class="font-15">职位名称</span>
            <input class="font-15" v-model="job.companyPosition" type="text" placeholder="请填写职位名称">
          </div>-->
          <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
            <span class="font-15">工作地址</span>
            <div class="select-box flex flex-justify-end flex-align-center pointer" style="width:200px;" @click="showCity=true">
              <span class="font-15">{{job.companyCountyName==''?'请选择':job.companyProvinceName+job.companyCityName+job.companyCountyName}}</span>
              <i class="fa fa-angle-right grey-9" style="font-size:24px;margin-left:5px;" aria-hidden="true"></i>
            </div>
            <city v-if="showCity" @close="showCity=false" @success="cityChange"></city>
          </div>
          <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
            <span class="font-15">详细地址</span>
            <input class="font-15" v-model="job.companyAddress" type="text" placeholder="请填写详细地址">
          </div>
          <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
            <span class="font-15">办公电话</span>
            <input class="font-15" v-model="job.companyTel" type="text" placeholder="请填写办公电话（选填）">
          </div>
        </div>
      </div>
      <a href="javascript:;" :class="['next-btn',nextEnable?'blue-bg':'grey-9-bg','font-16']" @click="next()">下一步</a>

      <div class="flex flex-center" style="padding-bottom:20px;">
        <a href="javascript:;" class="blue" @click="refuse">拒绝该用户的申请</a>
      </div>
    </div>
  </wrap>
</template>
<script>
    import mixins from '~/mixins'
    import wrap from '~/components/wrap.vue'
    import iSelect from '~/components/i-select.vue'
    import city from '~/components/city.vue'
    import fillProgress from './progress.vue'
    export default {
      mixins: [mixins],
      components: {wrap, iSelect, city, fillProgress},
      data () {
        return {
          userId: 0,
          nextEnable: false,
          showCity: false,
          job: {
            'companyIndustry': 0,
            'companyIndustryList': [
              {
                'value': 0,
                'text': '请选择单位行业'
              }
            ],
            'companyPositionType': 0,
            'companyPositionTypeList': [
              {
                'value': 0,
                'text': '请选择职位类型'
              }
            ],
            'workNature': 0,
            'workNatureList': [
              {
                'value': 0,
                'text': '请选择工作性质'
              }
            ],
            'companyNature': 0,
            'companyNatureList': [
              {
                'value': 0,
                'text': '请选择单位性质'
              }
            ],
            'workYears': 0,
            'workYearsList': [
              {
                'value': 0,
                'text': '请选择工作年限'
              }
            ],
            'company': '',
            'companyDept': '',
            'companyPosition': '',
            'companyProvinceCode': 0,
            'companyCityCode': 0,
            'companyCountyCode': 0,
            'companyProvinceName': 0,
            'companyCityName': 0,
            'companyCountyName': 0,
            'cityName': '',
            'companyAddress': '',
            'companyTel': '',
            'workNatureRemarks': '111'
          },
          newCompanyNatureList: [
                    {value: 0, text: '请选择单位性质'}
          ]
        }
      },
      created () {
        const self = this
        self.userId = self.$route.params.userId
        self.orderId = self.$route.params.orderId
        self.request({act: 'getJob', body: {platUserId: self.userId}}).then(res => {
          if (res.code === 0) {
            self.job = res.data
            self.changeCompanyNature()
          } else {
            /* eslint-disable*/
            layer.open({content: res.userMsg, skin: 'msg', time: 2})
          }
        })
        self.$watch('job', () => {
          if (self.job.workNature != 3) {
            if (self.job.companyIndustry > 0 && self.job.companyNature && self.job.company && self.job.companyDept && self.job.companyPositionType && self.job.workYears && parseInt(self.job.companyCountyCode) && self.job.companyAddress) {
              self.nextEnable = true
            } else {
              self.nextEnable = false
            }
          } else {
            if (self.job.workNatureRemarks) {
              self.nextEnable = true
            } else {
              self.nextEnable = false
            }
          }
        }, {deep: true})
      },
      methods: {
        changeCompanyNature () {
          const self = this
          self.newCompanyNatureList = []
          let temp = [{value: 0, text: '请选择单位性质'}]
          if (self.job.workNature == 1) {
            self.job.companyNatureList.forEach(item => {
              if (item.text == '民营') {
                temp[1] = item
              }
              if (item.text == '个体') {
                temp[2] = item
              }
            })
          }
          if (self.job.workNature == 2) {
            temp = self.job.companyNatureList
          }
          self.newCompanyNatureList = temp
            // self.job.companyNature=0;
        },
        cityChange (res) {
          this.job.companyProvinceCode = res.provinceId
          this.job.companyCityCode = res.cityId
          this.job.companyCountyCode = res.countyId
          this.job.companyProvinceName = res.provinceName
          this.job.companyCityName = res.cityName
          this.job.companyCountyName = res.countyName
          this.showCity = false
        },
        next () {
          const self = this
          if (!self.nextEnable) {
            return
          }
          layer.open({type: 2, shadeClose: false})
          this.request({
            act: 'saveJob',
            body: self.job
          }).then(res => {
            layer.closeAll()
            if (res.code == 0) {
              self.$router.push('/fill/society/' + self.userId + '-' + self.orderId)
            } else {
              layer.open({content: res.userMsg, skin: 'msg', time: 2})
            }
          })
        }
      }
    }
</script>
